<template>
    <div v-if="loading" class="loading-container-wrapper">
        <div class="loading-container">
            <div class="loading-title">
               <img src="../../assets/images/talkicon.png" alt="talkicon" class="talk-icon">
                开始对话
            </div>
            
            <el-text class="loading-text">{{loadingWord}}</el-text>
            <el-progress v-if="showProgress" class="loading-progress" :text-inside="true" :stroke-width="26" :percentage="percentage" />
            <div v-if="showSpin" class="loading-button">
                <div  class="loading-spin-icon"></div>
             </div>
            
             <div v-if="showBtn" class="loading-button">
                <el-button style="width: 50%;" type="primary" @click="startScene">开始</el-button>
             </div>
           
        </div>
    </div>
    
</template>
<script setup lang="ts">
import {ref,getCurrentInstance,onMounted} from 'vue'
import {mittTypes} from "@/util/types"

const { appContext : { config: { globalProperties } } } = getCurrentInstance();

const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
const loading = ref(true)
const showProgress = ref(false)
const showSpin = ref(false)
const showBtn = ref(false)
const loadingWord = ref('正在帮您连接数字人对话...')
const percentage = ref(0)
const curStyle = ref('null')
const startScene = () => {
    loading.value = false
    emitter.emit(mittTypes.LOADING.START_SCENE)
    if(curStyle.value === 'spin'){
            if(document.getElementById('AiHumanPlayBtn')){
                document.getElementById('AiHumanPlayBtn').click()
            }
            emitter.emit(mittTypes.HUMAN2D.PLAY_RTC)
        }
}

onMounted(() => {
    emitter.on(mittTypes.LOADING.SET_LOADING_STYLE, (style: any) => {
        curStyle.value = style
        switch (style) {
            case 'progress':
                showProgress.value = true
                showSpin.value = false
                showBtn.value = false
                break
            case'spin':
                showProgress.value = false
                showSpin.value = true
                showBtn.value = false
                break
            
        }
    })
    emitter.on(mittTypes.LOADING.UPDATE_LOADING_PROGRESS, (percent: number) => {
        percentage.value = percent
    })
    emitter.on(mittTypes.LOADING.UPDATE_LOADING_WORD, (word: string) => {
        loadingWord.value = word
    })
    emitter.on(mittTypes.LOADING.LOAD_FINISH, () => {
        showProgress.value = false
        showSpin.value = false
        showBtn.value = true
        loadingWord.value = "数字人对话已就绪，点击开始"
        
    })
})
</script>

<script lang="ts">

export default {
  name: 'loadingContainer'
}
</script>
<style lang="scss" scoped>
.loading-container-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;        
    height: 100%;
    background-image: url('../../assets/images/loadingback.jpg') ;
    z-index: 999;
    background-size: cover;
}
.loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 60%;
    width: 500px;
    height: 300px;
    border-radius: 20px;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    color: #333;
    padding:30px
}
.loading-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 50px;
}
.talk-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
}
.loading-text {
    margin-bottom: 20px;
}
.loading-progress {
    margin-top: 50px;
    height: 10px;
}
.loading-button {
    margin-top: 50px;
    width: 100%;
}
.loading-spin-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #333;
    border-top-color: #fff;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>